<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}} - 数智学习</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="../../css/style.css">
    <meta http-equiv="Content-Security-Policy" 
          content="default-src 'self'; 
                   script-src 'self' https://cdn.tailwindcss.com; 
                   style-src 'self' https://fonts.googleapis.com https://cdnjs.cloudflare.com 'unsafe-inline';
                   img-src 'self' data: https:;
                   font-src 'self' https://fonts.gstatic.com;
                   connect-src 'self';">
</head>
<body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-blue-900 text-white min-h-screen">
    <header class="backdrop-blur-md bg-opacity-30 bg-gray-900 fixed w-full z-50">
        <nav class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="logo flex items-center">
                    <img src="../../images/logo.svg" alt="数智学习" class="h-8 w-8 mr-2">
                    <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">数智学习</span>
                </div>
                <button class="md:hidden text-white" id="mobile-menu-button">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
                <ul class="nav-links hidden md:flex space-x-8">
                    <li><a href="../../index.html" class="hover:text-blue-400 transition-colors">首页</a></li>
                    <li><a href="../overview/experience.html" class="hover:text-blue-400 transition-colors">学习范围</a></li>
                    <li><a href="../overview/methods.html" class="hover:text-blue-400 transition-colors">学习方法</a></li>
                    <li><a href="../overview/thoughts.html" class="hover:text-blue-400 transition-colors">心得感悟</a></li>
                </ul>
                <div class="hidden md:flex items-center ml-4">
                    <div class="relative">
                        <input type="text" 
                               id="search-input"
                               class="bg-gray-800 bg-opacity-50 text-white rounded-full px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-400 w-64"
                               placeholder="搜索文章...">
                        <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                        
                        <div id="search-dropdown" class="hidden absolute left-0 right-0 mt-2 bg-gray-900 bg-opacity-95 backdrop-blur-md rounded-lg shadow-lg overflow-hidden z-50">
                            <div id="search-results" class="max-h-96 overflow-y-auto">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mobile-menu hidden md:hidden mt-4 space-y-4">
                <a href="../../index.html" class="block hover:text-blue-400 transition-colors">首页</a>
                <a href="../overview/experience.html" class="block hover:text-blue-400 transition-colors">学习范围</a>
                <a href="../overview/methods.html" class="block hover:text-blue-400 transition-colors">学习方法</a>
                <a href="../overview/thoughts.html" class="block hover:text-blue-400 transition-colors">心得感悟</a>
            </div>
        </nav>
    </header>

    <main class="pt-24">
        <div class="container mx-auto px-6 py-8">
            <div class="backdrop-blur-md bg-white bg-opacity-5 rounded-xl p-8">
                <h1 class="text-3xl font-bold mb-6">{{title}}</h1>
                <div class="prose prose-invert max-w-none">
                    {{content}}
                </div>
            </div>
        </div>
    </main>

    <footer class="container mx-auto px-6 py-8 text-center text-gray-400">
        <p class="mb-2">&copy; 2024 数智学习. All rights reserved.</p>
        <p><a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-blue-400 transition-colors">晋ICP备20000773号-3</a></p>
    </footer>
    
    <script src="../../js/effects.js"></script>
    <script src="../../js/search.js"></script>
</body>
</html> 